<template>
  <div class="app-container">
    <!-- 50是每一栏之间的间隔 -->
    <el-row :gutter="50">

      <el-col :span="11">
       <el-card :body-style="{ padding: '15px' }" shadow="always">
          <div class="button-text">高风险内网主机TOP10</div>
          <div ref="chart" style="width: 600px;height: 400px;"></div>
       </el-card>
     </el-col>

     <el-col :span="12" >
       <el-card :body-style="{ padding: '0px' }" shadow="always">

         <!-- 表格+分页条 -->
         <div style="padding: 10px;">
           <div class="button-text">
             高风险内网主机详情
           </div>
           <el-table :data="tableData" style="width: 100%" stripe @selection-change="handleSelectionChange">
             <el-table-column prop="id" label="id" align="center" />

             <el-table-column prop="name" label="主机名" align="center" />
             <el-table-column prop="cip" label="主机IP" align="center" />

             <el-table-column prop="count" label="访问恶意域名数" align="center" />

             <el-table-column prop="dga" label="访问最高频的恶意域名" align="center" />

           </el-table>



           <br>

           <!--分页工具条 -->
           <el-pagination
             :background="background"
             :current-page="currentPage"
             :page-sizes="[5, 10, 15, 20]"
             :page-size="10"
             layout="total, sizes, prev, pager, next, jumper"
             :total="totalCount"
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
           />
         </div>

       </el-card>
     </el-col>
    </el-row>


    <br>
</div>
</template>

<script>
import echarts from 'echarts';

export default {
    data() {
      return {
        background: true,
        // 每页显示的条数
        pageSize: 5,
        // 总记录数
        totalCount: 100,
        // 当前页码
        currentPage: 1,


        reds: [
          '#800000',
          '#800000',
          '#8B0000',
          '#8B0000',
          '#A52A2A',
          '#A52A2A',
          '#B22222',
          '#B22222',
          '#CD5C5C',
          '#CD5C5C',
        ],


        tableData: [{
            id: 1,
            name: '主机1',
            cip: '192.168.0.1',
            count: 300,
            dga: 'dgadga.org'
          },
          {
            id: 2,
            name: '主机2',
            cip: '192.168.0.1',
            count: 300,
            dga: 'dgadga.org'
          },
          {
            id: 3,
            name: '主机3',
            cip: '192.168.0.1',
            count: 300,
            dga: 'dgadga.org'
          },
          {
            id: 4,
            name: '主机4',
            cip: '192.168.0.1',
            count: 300,
            dga: 'dgadga.org'
          },
          {
            id: 5,
            name: '主机5',
            cip: '192.168.0.1',
            count: 300,
            dga: 'dgadga.org'
          }
        ],
      }
    },
    mounted() {
      this.getDateData()
    },
    methods: {
      handleSizeChange(val) {
        // 重新设置每页显示的条数
        this.pageSize = val
        this.page()
      },

      handleCurrentChange(val) {
        // 重新设置当前页码
        this.currentPage = val
        this.page()
      },

      getDateData() {
        let chartDom = echarts.init(this.$refs.chart);
        let option = {
          // title: {
          //     text: '高风险内网主机TOP10'
          // },
          tooltip: {},
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          series: [
              {
                  type: 'graph',
                  layout: 'none',
                  symbolSize: 40,
                  roam: true,
                  label: {
                      show: true
                  },
                  edgeSymbol: ['circle', 'arrow'],
                  edgeSymbolSize: [4, 10],
                  focusNodeAdjacency : true,
                  edgeLabel: {
                      fontSize: 20
                  },
                  categories: [{
                      name: '风险主机'
                  }, {
                      name: '网关'
                  }],
                  data: [{
                      name: '网关',
                      x: 500,
                      y: 300,
                      category: 1,

                  }, {
                      name: '主机1',
                      x: 200,
                      y: 150,
                      category: 0,
                      text:'192.168.011.011',

                  }, {
                      name: '主机2',
                      x: 200,
                      y: 250,
                      category: 0,
                  }, {
                      name: '主机3',
                      x: 200,
                      y: 350,
                      category: 0,
                  },{
                      name: '主机4',
                      x: 200,
                      y: 450,
                      category: 0,
                  }, {
                      name: '主机5',
                      x: 200,
                      y: 550,
                      category: 0,
                  }, {
                      name: '主机6',
                      x: 800,
                      y: 150,
                      category: 0,
                  },{
                      name: '主机7',
                      x: 800,
                      y: 250,
                      category: 0,
                  }, {
                      name: '主机8',
                      x: 800,
                      y: 350,
                      category: 0,
                  }, {
                      name: '主机9',
                      x: 800,
                      y: 450,
                      category: 0,
                  },{
                      name: '主机10',
                      x: 800,
                      y: 550,
                      category: 0,
                  }, {
                    name: '检测节点',
                    x: 500,
                    y: 500,
                    category: 1,
                  }],
                  // links: [],
                  links: [ {
                      source: 1,
                      target: 0,
                      // label: {
                      //     show: true
                      // },
                      lineStyle: {
                          curveness: 0.2
                      }
                  }, {
                      source: 2,
                      target: 0,
                      lineStyle: {
                          curveness: 0.2
                      }
                  }, {
                      source: 3,
                      target: 0,
                      lineStyle: {
                          curveness: 0.2
                      }
                  },{
                      source: 4,
                      target: 0,
                      lineStyle: {
                          curveness: 0.2
                      }
                  },{
                      source: 5,
                      target: 0,
                      lineStyle: {
                          curveness: 0.2
                      }
                  },{
                      source: 6,
                      target: 0,
                      lineStyle: {
                          curveness: 0.2
                      }
                  },{
                      source: 7,
                      target: 0,
                      lineStyle: {
                          curveness: 0.2
                      }
                  },{
                      source: 8,
                      target: 0,
                      lineStyle: {
                          curveness: 0.2
                      }
                  },{
                      source: 9,
                      target: 0,
                      lineStyle: {
                          curveness: 0.2
                      }
                  },{
                      source: 10,
                      target: 0,
                      lineStyle: {
                          curveness: 0.2
                      }
                  },{
                      source: 0,
                      target: 11,

                  }],
                  lineStyle: {
                      opacity: 0.9,
                      width: 2,
                      curveness: 0
                  }
              }
          ]
        };

        chartDom && chartDom.setOption(option);
        chartDom.resize();
        let sizeFun = () => {
          chartDom.resize();
        };
        window.addEventListener("resize", sizeFun);
        this.$once("hook:beforeDestroy", function () {
          echarts.dispose(chartDom);
        });
      }
    }
}
</script>

<style>
.button-text {
      line-height: 18px;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.45);
      font-size: 16px;
      margin-bottom: 12px;
    }
</style>
